<template>
  <div class="main" :key="HistogramLegend">
    <el-tabs>
      <div class="chartsStyle">
        <div class="chart-title">

          <tr style="height: 30px; ">
            <td>
              <el-switch
                v-model="draggable"
                active-text="可以拖拽"
                inactive-text="不可拖拽">
              </el-switch></td>
          </tr>
          <br/>
          <tr style="height: 30px;">
            <td><span class="nature">背景颜色</span></td>
            <td>
              <el-color-picker v-model="backgroundColor" show-alpha size="mini"></el-color-picker>
            </td>
          </tr>
          <br/>
          <tr style="height: 30px;">
            <td><span class="nature">围绕色</span></td>
            <td>
              <el-color-picker v-model="pointColor" show-alpha size="mini"></el-color-picker>
            </td>
          </tr>
          <br/>

          <tr style="height: 30px;">
            <td><span class="nature">字体颜色</span></td>
            <td>
              <el-color-picker v-model="worldColor" show-alpha size="mini"></el-color-picker>
            </td>
          </tr>
          <br/>

          <tr style="height: 30px;">
            <td><span class="nature">连接线颜色</span></td>
            <td>
              <el-color-picker v-model="lineColor" show-alpha size="mini"></el-color-picker>
            </td>
          </tr>
          <br/>

         <!-- <tr>
            <td><span class="nature">点大小</span></td>
            <td>
              <el-input-number v-model="symbolSize" @change="setSymbolSize" :min="18" :max="80"  size="small" >
              </el-input-number>
            </td>
          </tr>
          <br/>-->
          <tr>
            <td><span class="nature">字体大小</span></td>
            <td>
              <el-input-number v-model="fontSize" @change="setFontSize" :min="12" :max="40"  size="small" >
              </el-input-number>
            </td>
          </tr>
          <br/>

          <tr>
            <td><span class="nature">桥字体大小</span></td>
            <td>
              <el-input-number v-model="edgeSize" @change="setFontSize" :min="12" :max="40"  size="small" >
              </el-input-number>
            </td>
          </tr>
          <br/>

          <tr>
            <td><span class="nature">连接线粗度</span></td>
            <td>
              <el-input-number v-model="lineWidth" @change="setFontSize" :min="1" :max="10"  size="small" >
              </el-input-number>
            </td>
          </tr>
          <br/>

        </div>
      </div>
    </el-tabs>
  </div>
</template>

<script>

export default {
  data () {
    return {
      backgroundColor: '#fff', // 背景颜色
      draggable: true, // 指示节点是否可以拖动
      symbolSize: 50, // 点的大小
      pointColor: '#d2dde6', // 点的颜色
      fontSize: 20, // 点中字体的大小
      worldColor: '#000', // 点中字体的颜色
      edgeSize: 20, // 连接线上字体大小
      lineColor: '#000', // 连接线颜色
      lineWidth: 1 // 连接线粗度
    }
  },
  watch: {
    edgeSize (val) {
      this.$store.state.relationLegend.edgeSize = val
    },
    worldColor (val) {
      this.$store.state.relationLegend.worldColor = val
    },
    fontSize (val) {
      this.$store.state.relationLegend.fontSize = val
    },
    pointColor (val) {
      this.$store.state.relationLegend.pointColor = val
    },
    backgroundColor (val) {
      this.$store.state.relationLegend.backgroundColor = val
      console.log('设置的背景色为：' + val)
    },
    draggable (val) {
      this.$store.state.relationLegend.draggable = val
    },
    symbolSize (val) {
      console.log('设置的点大小：' + val)
      this.$store.state.relationLegend.symbolSize = val
    },
    lineColor (val) {
      this.$store.state.relationLegend.lineColor = val
    },
    lineWidth (val) {
      this.$store.state.relationLegend.lineWidth = val
    }
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
  .main{
    background-color: #E6E3E3;
  }
  .nature{
    font-size: 17px;
    font-weight:bold;

  }

</style>
